import React, {PureComponent} from 'react'
import {TitleWrapper, TitleContent, WriterTitle, FindMore, ListContent, WriterList} from '../style'
import { connect } from 'react-redux'
import { Icon } from 'antd'
class Title extends PureComponent{
    render(){ 
            const { writerList } = this.props;
        return(
            <div>
                <TitleWrapper>
                    <img alt = '' className = 'title-img' src = '//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png' />
                    <TitleContent>
                       <div className = 'title'>
                         下载简书手机App
                         <Icon type="right" theme="outlined" style = {{fontSize: '13px'}} />
                       </div>
                       <div className = 'desc'>
                        随时随地发现和创作内容
                       </div>
                    </TitleContent>
                    
                </TitleWrapper>
                    <WriterTitle>
                        <div className = 'remmendwriter'>推荐作者</div>
                        <div className = 'remmendchange'>换一批</div>
                    </WriterTitle>
                     
                    <WriterList>
                         {   
                           writerList.map((items) => {
                               return (
                                <ListContent key = {items.get('id')}>
                                    <img alt = '' className = 'list-img' src = {items.get('urlImg')} />
                                    <div className = 'concern'>
                                    <Icon type="plus" theme="outlined" />
                                       关注
                                    </div>
                                    <div className = 'List-title' >{items.get('title')}</div>
                                    <p className = 'culture'>写了{items.get('culture1')}k字 · {items.get('culture2')}喜欢</p>
                                </ListContent>
                               )
                            
                            })
                            } 
                
                        {/* <ListContent>
                            <img alt = '' className = 'list-img' src = '//upload.jianshu.io/users/upload_avatars/9234143/0819f188-bedf-4878-bbc7-bf08c163314e?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp' />
                            <div className = 'concern'>关注</div>
                            <div className = 'List-title' >十七楼的安素</div>
                            <p className = 'culture'>写了97.5k字 · 347喜欢</p>
                        </ListContent>
                        <ListContent>
                            <img alt = '' className = 'list-img' src = '//upload.jianshu.io/users/upload_avatars/9234143/0819f188-bedf-4878-bbc7-bf08c163314e?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp' />
                            <div className = 'concern'>关注</div>
                            <div className = 'List-title' >十七楼的安素</div>
                            <p className = 'culture'>写了97.5k字 · 347喜欢</p>
                        </ListContent>
                        <ListContent>
                            <img alt = '' className = 'list-img' src = '//upload.jianshu.io/users/upload_avatars/9234143/0819f188-bedf-4878-bbc7-bf08c163314e?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp' />
                            <div className = 'concern'>关注</div>
                            <div className = 'List-title' >十七楼的安素</div>
                            <p className = 'culture'>写了97.5k字 · 347喜欢</p>
                        </ListContent>
                        <ListContent>
                            <img alt = '' className = 'list-img' src = '//upload.jianshu.io/users/upload_avatars/9234143/0819f188-bedf-4878-bbc7-bf08c163314e?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp' />
                            <div className = 'concern'>关注</div>
                            <div className = 'List-title' >十七楼的安素</div>
                            <p className = 'culture'>写了97.5k字 · 347喜欢</p>
                        </ListContent>
                        <ListContent>
                            <img alt = '' className = 'list-img' src = '//upload.jianshu.io/users/upload_avatars/9234143/0819f188-bedf-4878-bbc7-bf08c163314e?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp' />
                            <div className = 'concern'>关注</div>
                            <div className = 'List-title' >十七楼的安素</div>
                            <p className = 'culture'>写了97.5k字 · 347喜欢</p>
                        </ListContent> */}
                        
                     </WriterList>
                     <FindMore>
                         查看全部
                     </FindMore>
            </div>
        )
    }
}
const mapState = (state) => {
    return{
        writerList: state.get('home').get('writerList')
    }
}
export default connect(mapState, null)(Title);